<template>
	<view class="">
	</view>
	<up-collapse
		accordion
		@open="change"
	  >
	    <up-collapse-item
	      :title="item.chapterName"
	      :name="item"
		  v-for="item in props.list" :key="item.id"
	    >
	      <view>
			  <view 
			  class="detail-card" 
			   v-for="(v,i) in item.children" :key="v.id"
			   @click="changeItem(v.id)"
			   >
			  	<view class="class-type" :class="{'class-type-active': active === v.id}">视频</view>
			  	<view class="class-name" :class="{'class-name-active': active === v.id}">{{String(i + 1).padStart(2,'0')}} {{v.chapterName}}</view>
			  	<up-icon name="lock-fill" :color="active === v.id ? '#ef4337' : '#cacbcf'" size="18"></up-icon>
			  </view>
		  </view>
	    </up-collapse-item>
	  </up-collapse>
</template>

<script setup>
import {ref} from 'vue'	
const props = defineProps({
	list: Array
})
const active = ref(0)
const changeItem = (id) => {
	active.value = id
}
const change = (item) => {
	if (item.children?.length) {
		active.value = item.children[0].id
	}
}
</script>

<style lang="scss" scoped>
.detail-card{
  display: flex;
  padding: 20rpx 10rpx;
  align-items: center;
  font-size: 28rpx;
  .class-type{
	color:#cacbcf;
	border: 1px dotted #cacbcf;
	padding: 5rpx;
  }
  .class-name{
	  flex: 1;
	  margin-left: 20rpx;
	  margin-right: 20rpx;
	  color:#cacbcf;
  }
  .class-name-active{
	   color: #ef4337;
  }
  .class-type-active{
	  color: #ef4337;
	  border: 1px dotted #ef4337;
  }
}
</style>